@wrapper-height: 100vh;
@scrollview-height: calc(@wrapper-height - 10px);
@scrollbar-height: 10px;
@scrollbar-width: 5px;
@scrollbar-color: #999;

page {
  background-color: #242328;
}

.wrapper {
  height: @wrapper-height;
  display: flex;
  justify-content: center;
  // align-items: center;
  // flex-direction: column;

  .scrollview {
    width: 100%;
    height: @scrollview-height;
    overflow-y: scroll;
    margin-bottom: 10px;
    padding: 0 20px;

    &::-webkit-scrollbar {
      width: @scrollbar-width;
      height: @scrollbar-height;
    }

    &::-webkit-scrollbar-thumb {
      background-color: @scrollbar-color;
    }
  }

  .image {
    width: 100%;
    display: block;
    margin-top: 10px;
  }

  .big-image-scrollview {
    // width:90%;
    position: fixed;

    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 999;
    overflow-y: scroll;

    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    // z-index: 999;
    // overflow-y: scroll;
    // max-width: 90%;
    // // max-height: 90%;

    background-color: rgba(255, 255, 255, 0.5);
  }

  .big-image {
    width: auto;
    height: auto;
    display: block;
    // margin: 20px auto;
  }

  .big-image-wrapper {
    position: relative;
  }

  .close-button {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .icon-back {
    font-size: 24px;
    color: #333;
    position: absolute;
    left: 20px;
    top: 20px;
  }

  // @font-face {
  //   font-family: "iconfont";
  //   src: url('https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf') format('truetype'); // 修改为对应库的链接
  // }

  .icon-back:before {
    font-family: "iconfont" !important;
    content: "\e61f";
  }

  .page-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .im-toolbar {
    position: fixed;
    bottom: 0px;
    margin-bottom: 10px;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #ececec;
    display: flex;
    align-items: center;
    z-index: 200;
    justify-content: center;
  }
}
